<template>
<div class="sign">
    <div class="logo">
        <img  height="64" width="344" :src="logoImgUrl" alt="logo">
    </div>
    <div class="wrapper">
        <div class="container"> 
            <h1>注 册</h1>
            <div class="nav" v-if="isBulkEnrollment==false">
              <van-field v-model="username" type="text" label="姓  名" placeholder="请输入真实姓名" />
              <van-field v-model="IDNum" type="text" :error-message="message1" @input="checkIDNum" label="身份证" placeholder="请输入对应身份证号"/>
              <div class="option">
                用户身份
                <select v-model="permission" >
                  <option value="none" selected disabled hidden>选择用户身份</option>
                  <option value="学生">学  生</option>
                  <option value="教师">教  师</option>
                </select>
              </div>
              <van-field v-model="classes" type="number" label="班  级" placeholder="请输入班级" v-if="permission == '学生'" />
              <div class="option" v-else-if="permission == '教师'">
                教授学科
                <select v-model="subject" >
                  <option value="none" selected disabled hidden>选择教授学科</option>
                  <option value="语文">语  文</option>
                  <option value="数学">数  学</option>
                  <option value="化学">化  学</option>
                </select>
              </div>
              <van-button round type="info" color="#055383" @click="register" style="width:80px;margin-top:10px">注册</van-button>
              <p @click="BulkEnrollment" style="margin:5px">批量注册，点此上传文件</p>
            </div>
            <div id="bulkEnrollment" v-else-if="isBulkEnrollment==true">
              <el-upload class='image-uploader' :auto-upload='true' list-type='.xlsx' :show-file-list='true'
              :before-upload="beforeUpload" :drag='true' action='' :limit="1" :on-exceed="handleExceed"
              :http-request="uploadFile">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip">一次只能上传一个文件，仅限xslx或xsl格式，单文件不超过1MB</div>
              </el-upload>
              <p @click="BulkEnrollment">用户注册，点此返回</p>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { register } from "../../api/user";
import { Toast } from "vant";
import XLSX from "xlsx";
export default {
  data() {
    return {
      logoImgUrl:require('../../assets/logo.png'),
      isBulkEnrollment: false,
      username: "",
      IDNum: "",
      account: "",
      permission: "",
      classes: "",
      subject: "",
      listTable: [],

      message1:"",
      IDNumReg:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      
    };
  },
  components:{
    
  },
  methods: {
    checkIDNum(event){
      if(!this.IDNumReg.test(event)){
        this.message1 ="身份证号为18位数"
      }else{
        this.message1 = ""
      }
    },
    BulkEnrollment() {
      if (this.isBulkEnrollment) {
        this.isBulkEnrollment = false
      }else {
        this.isBulkEnrollment = true
      }
    },
    async register() {
      if (this.listTable.length == 0) {
        let obj = {
          username: this.username,
          IDNum: this.IDNum,
          permission: this.permission,
          subject: this.subject,
          classes: this.classes
        }
        this.listTable.push(obj)
      }
      await register(this.listTable)
        .then((res) => {
          Toast(res.msg);
          console.log(res.msg);
        })
        .catch((err) => console.log(err));
      this.listTable = []
    },

    // 上传文件之前的钩子
    beforeUpload(file) {
      // 判断文件格式
      let hz = file.name.split(".")[1]
      if (hz != 'xlsx' && hz != 'xls') {
        return false;
      }
    },
    // 上传文件个数超过定义的数量
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`)
    },
    // 上传文件
    uploadFile(item) {
      // console.log(item.file);
      var reader = new FileReader()// FormData 对象
      let arr = [];
      reader.readAsBinaryString(item.file)
      reader.onload = (e) => {
        const data = e.target.result
        const wb = XLSX.read(data, { type: "binary"});
        const wsname = wb.SheetNames[0]
        const ws = wb.Sheets[wsname]
        var result = XLSX.utils.sheet_to_json(ws, { header: 1 })
        result.forEach((item, index) => {
          if(index > 0) {
            let obj = {
              username: item[0],
              IDNum: item[1],
              permission: item[2],
              subject: item[3],
              classes: item[4],
              enrollmentYear: item[5]
            }
            this.listTable.push(obj)
          }
        });
        console.log(this.listTable);
        this.register()
      }

      
     
    }
  },
}
</script>

<style lang="stylus">
.sign
  box-sizing border-box
  color white
  font-weight 300
  font-family 'Source Sans Pro', sans-serif
  flex 1 1 100%
  .logo
    margin-top 20px
    margin-left 10px
  .wrapper
    border 1px solid #CCCCCC
    background #50a3a2cc
    height 400px
    margin 50px 10px 0 10px
    .container
        margin 0 auto
        text-align center
        display block
        color white
        h1
          margin-top 10px
        .nav
          width 300px
          margin auto
          span, input
            color white
          .van-field, .option
            display flex
            appearance none
            outline 0
            border 1px solid #ffffff66
            background-color #ffffff33
            border-radius 3px
            margin-top 10px
            font-size 18px
            .van-field__label
              width 3.5em
            .van-field__body:hover
                background-color #ffffff66
            :focus
                background-color white
                color #53e3a6
          .option
            padding 10px 16px
            select
              margin-left 0.5em
              background-color #ffffff33
              border none
              width 187px 
              option
                color #666
        #bulkEnrollment
          margin auto
          .el-upload-dragger
            width 660px
            height 220px

</style>